<template>
  <div>
    <div class="progress-bar-container">
      <div class="progress-bar" :style="{ background: getGradient() }">
        <div v-for="(item, index) in data1" :key="index" :style="{ width: getWidth(item.start, item.end) + '%' }"
          class="progress-bar-section">{{ item.type }}</div>
        <div class="progress-indicator" :style="{ left: getIndicatorPosition() + '%' }">

        </div>
        <div class="progress-gray-part" :style="{ left: getGrayPartPosition() + '%', width: getGrayPartWidth() + '%' }">
        </div>
        <div v-for="(item, index) in data1" :key="`separator-${index}`" v-if="index < data1.length - 1"
          :style="{ left: getLabelPosition(item.end) + '%' }" class="progress-separator"></div>
      </div>
      <div class="progress-labels">
        <span v-for="(item, index) in data1" :key="index" :style="{ left: getLabelPosition(item.start) + '%' }">
          {{ item.start }}
        </span>
        <span style="left: 100%">10</span>
      </div>
      <div class="progress-numbers">
        <span v-for="(item, index) in data1" :key="index" :style="{ left: getNumberPosition(item.start) + '%' }">
          {{ item.start_num }}
        </span>
        <span style="left: 100%">3600</span>
      </div>
      <div class="current-value-label" :style="{ left: getIndicatorPosition() + '%' }">
        {{ this_num }}
      </div>
    </div>
    <szzsDes v-if="szzs_list.length" :szzs_list="szzs_list" :szzs_time="szzs_time" ></szzsDes>
  </div>

</template>

<script setup>
import szzsDes from './szzsDes.vue'
import { ref } from 'vue';

const data1 = ref([
  { start: 0, end: 2, start_num: 0, end_num: 2000, type: '危险' },
  { start: 2, end: 4, start_num: 2000, end_num: 2600, type: '低风险' },
  { start: 4, end: 6, start_num: 2600, end_num: 3000, type: '中空期' },
  { start: 6, end: 8, start_num: 3000, end_num: 3400, type: '中风险' },
  { start: 8, end: 10, start_num: 3400, end_num: 3600, type: '高风险' },
]);
//   const this_num = ref(3200);
const props = defineProps({
  this_num: {
    type: Number,
    default: 2000,
    required: true
  },
  szzs_list: {
    type: Array,
    default: [],
    required: true
  },  
  szzs_time: {
    type: Array,
    default: [],
    required: true
  },
});
const getGradient = () => {
  return 'linear-gradient(to right, green, #06f, #b78a1c, red)';
};

const getWidth = (start, end) => {
  return ((end - start) / 10) * 100;
};

const getIndicatorPosition = () => {
  let position = 0;
  for (let i = 0; i < data1.value.length; i++) {
    const item = data1.value[i];
    if (props.this_num <= item.end_num) {
      position = ((props.this_num - item.start_num) / (item.end_num - item.start_num)) * ((item.end - item.start) / 10) * 100 + (item.start / 10) * 100;
      break;
    }
  }
  return position;
};

const getLabelPosition = (start) => {
  return (start / 10) * 100;
};

const getNumberPosition = (start) => {
  return (start / 10) * 100 + 5;
};

const getGrayPartPosition = () => {
  let position = 0;
  for (let i = 0; i < data1.value.length; i++) {
    const item = data1.value[i];
    if (props.this_num <= item.end_num) {
      position = ((props.this_num - item.start_num) / (item.end_num - item.start_num)) * ((item.end - item.start) / 10) * 100 + (item.start / 10) * 100;
      break;
    }
  }
  return position;
};

const getGrayPartWidth = () => {
  return 100 - getIndicatorPosition();
};
</script>

<style scoped lang="scss">
.progress-bar-container {
  position: relative;
  width: 100%;
  height: 30px;
  margin-top: 20px;
  width: 320px;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar-section {
  display: inline-block;
  height: 100%;
  text-align: center;
  line-height: 30px;
  color: #ffffff91;
}

.progress-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: black;
}

.progress-gray-part {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #808080ba;
}

.progress-separator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: white;
}

.progress-labels {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.progress-numbers {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.current-value-label {
  position: absolute;
  top: -45px;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 16px;
}

.current-value-label::before {
  content: "";
  width: 1px;
  height: 25px;
  position: absolute;
  left: 50%;
  bottom: -25px;
  background-color: #333;
  transform: translateX(-50%);
}
</style>